<template>
<div class="back">
  <!-- 定义布局容器 -->
  <el-container class="home-container">

    <!-- 定义头标签 -->
    <el-header>
      <div>
        <img src="../images/logo.png" />
        <span>后台管理系统</span>
      </div>
      <el-button type="warning" @click="logout">退出登录</el-button>
    </el-header>

    <!-- 定义中间区域-->
    <el-container>
      <div class="left_menu" style="height:100%">
      <el-row class="tac" style="height:100%">
       <el-col :span="50" style="height:100%">
        <el-menu
      default-active="3-1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose" 
      style="height:100%"
      background-color="#3554a3"
      text-color="#fff"
      active-text-color="#ffd04b">

      <el-menu-item index="1">
          <i class="el-icon-document"></i>
          <span slot="title" @click="news">最新资讯</span>
      </el-menu-item>

      <el-menu-item index="2">
        <i class="el-icon-office-building"></i>
        <span slot="title" @click="homeResources">房源管理</span>
      </el-menu-item>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-custom"></i>
          <span>用户管理</span>
        </template>
          <el-menu-item index="3-1" @click="userManage" class="el-icon-user-solid">用户列表</el-menu-item>
      </el-submenu>

      <el-menu-item index="4">
        <i class="el-icon-chat-line-round"></i>
        <span slot="title" @click="comment">评论留言</span>
      </el-menu-item>  

      </el-menu>
    </el-col>
    </el-row>
  </div>
      <!-- 定义主页面结构-->
      <el-main>
        <!-- 定义路由展现页面-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
  export default {
    
    data() {
      return {
       
      }
    },
    methods: {
      logout() {
        //1.删除session中的数据
        window.sessionStorage.clear()
        //2.用户访问登录页面
        this.$router.push('/login')
      },
      
      defaultActiveMenu(activeMenu){
        //为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
        window.sessionStorage.setItem("activeMenu",activeMenu)
        this.defaultActive = activeMenu
      },

      userManage(){
        this.$router.push("/userManage")
      },

      comment(){
        this.$router.push("/comment")
      },

      homeResources(){
        this.$router.push("/houseResources")
      },

      news(){
        this.$router.push("/news")
      }
    }
  }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  .el-header {
    background-color: #f6f7f8;
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #00080c; //设定字体颜色
    padding-left: 0px;

    >div {
      display: flex;
      align-items: center;

      span {
        margin-top: -12px;
        margin-left: 5px;
        font-size: 26px; //设定字体高度
      }
    }
  }

  .home-container {
    height: 100%;
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  .back{
    		width: 100%;
    		height: 150%;
    		background: url("../images/1.png") center center no-repeat;
    		background-size: 100% 100%;
    		z-index: -1;
    		position: absolute;
    	}


</style>
